<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>${applicationScope.ojName}</title>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/amazeui.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/amazeui.flat.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/amazeui.page.css"/>
    <style>
        .main {
            width: 60%;
            margin: 0 auto;
        }

        form {
            width: 60%;
            margin: 30px auto;
        }
    </style>
</head>

<body>

<jsp:include page="/heard.html" flush="true"/>

<div class="main" id="main">
    <form class="am-form">
        <fieldset>
            <legend>${sessionScope.user.user_id}</legend>

            <div class="am-form-group am-form-group-lg am-form-icon am-form-feedback" id="nick_div">
                <label for="nick">*姓名</label>
                <input type="text" class="am-radius am-form-field" id="nick" value="${sessionScope.user.nick}">
                <span class="am-icon-times" style="display: none;"></span>
            </div>

            <div class="am-form-group am-form-group-lg am-form-icon am-form-feedback" id="old_password_div">
                <label for="old_password">*旧密码</label>
                <input type="password" class="am-radius am-form-field" id="old_password">
                <span class="am-icon-times" style="display: none;"></span>
            </div>

            <div class="am-form-group am-form-group-lg am-form-icon am-form-feedback" id="new_password_div">
                <label for="new_password">新密码</label>
                <input type="password" class="am-radius am-form-field" id="new_password">
                <span class="am-icon-times" style="display: none;"></span>
            </div>

            <div class="am-form-group am-form-group-lg am-form-icon am-form-feedback" id="new_password2_div">
                <label for="new_password2">确认新密码</label>
                <input type="password" class="am-radius am-form-field" id="new_password2">
                <span class="am-icon-times" style="display: none;"></span>
            </div>

            <div class="am-form-group am-form-group-lg am-form-icon am-form-feedback" id="email_div">
                <label for="email">邮箱</label>
                <input type="email" class="am-radius am-form-field" id="email" value="${sessionScope.user.email}">
                <span class="am-icon-times" style="display: none;"></span>
            </div>

            <button type="button" class="am-btn am-btn-primary submit">提交</button>
            <a href="${pageContext.request.contextPath}/logout.html" type="button" class="am-btn am-btn-danger logout">注销</a>
        </fieldset>
    </form>
</div>

<jsp:include page="/foot.html" flush="true"/>

<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/amazeui.min.js"></script>
<script src="${pageContext.request.contextPath}/js/sha256.min.js"></script>
<script>
    $(function () {
        $('.submit').click(function () {
            clearError();
            $.AMUI.progress.start();
            var nick = $('#nick').val();
            var email = $('#email').val();
            var password = $('#new_password').val();
            var password2 = $('#new_password2').val();
            var old_password = $('#old_password').val();

            if (nick.length === 0) {
                setNickError();
                $.AMUI.progress.done();
                return false;
            }
            var patrn = /^(\w){6,16}$/;
            if (patrn.exec(old_password)) {
            } else {
                setOldPasswordError();
                $.AMUI.progress.done();
                return false;
            }
            if (password.length === 0 || patrn.exec(password)) {
            } else {
                setPasswordError();
                $.AMUI.progress.done();
                return false;
            }
            if (password !== password2) {
                setPasswordError();
                $.AMUI.progress.done();
                return false;
            }
            password = sha256(password);
            old_password = sha256(old_password);
            $.post('${pageContext.request.contextPath}/api/info.html', {
                nick: nick,
                email: email,
                oldPassword: old_password,
                password: password
            }, function (data) {
                if (data === 'true') {
                    window.location.href = "${pageContext.request.contextPath}/index.html";
                } else {
                    alert('原密码错误');
                    $('#old_password').val('');
                    setOldPasswordError();
                }
                $.AMUI.progress.done();
            });
        });
    });

    function setNickError() {
        $('#nick_div').addClass('am-form-error')
            .find('span').show();
    }

    function setPasswordError() {
        $('#new_password_div').addClass('am-form-error')
            .find('span').show();
        $('#new_password2_div').addClass('am-form-error')
            .find('span').show();
    }

    function setOldPasswordError() {
        $('#old_password_div').addClass('am-form-error')
            .find('span').show();
    }

    function clearError() {
        $('#new_password_div').removeClass('am-form-error')
            .find('span').hide();
        $('#new_password2_div').removeClass('am-form-error')
            .find('span').hide();
        $('#old_password_div').removeClass('am-form-error')
            .find('span').hide();
        $('#nick_div').removeClass('am-form-error')
            .find('span').hide();
    }
</script>
</body>

</html>